<template>
  <div :class="['about-init', {'about':init}]">
    <h1>酒店信息</h1>

    <div id="about-type-div">
      <i>选择您所需的消息类型：</i>
      <el-radio-group id="about-type" v-model="sendMessage.choose">
        <el-radio value="hotel-info" border @click="changeRadio">酒店信息</el-radio>
        <el-radio value="room-info" border @click="changeRadio">房间类别</el-radio>
        <el-radio value="service-info" border @click="changeRadio">特色体验</el-radio>
      </el-radio-group>
      <div>{{ this.receiveMessage.message }}</div>
    </div>

  </div>
</template>

<script>
import { ElRadioGroup } from 'element-plus';
import { ElRadio } from 'element-plus';

export default {
  name:"AboutView",
  components:{
    ElRadioGroup,
    ElRadio,
  },
  data(){
    return{
      init:false,
      sendMessage:{
        // type:'2',
        choose:"default",
      },
      receiveMessage:{
        message:String,
      }
    }
  },
  mounted(){
    //通过设定延迟时间，实现跳出本页面的效果
    setTimeout(() => {
      this.init=true;
    }, 10);
  },
  methods:{
    //点击
    changeRadio(){
      // console.log("change about-information to: "+this.choose);
      /*
      //传送消息在此实现:
      let url="https://www.baidu.com";
      axios.get(url,{params:{...sendMessage.value}})
        .then(result=>{
          this.receiveMessage=result.data.message;  
        })
        .catch(err=>{
          console.log(err);
        })
      */
    },
  }
}
</script>


<style scoped>
.about-init{
  position: relative;
  width: 100vw;
  left: -70%;
  transform: translate(0%,0%);
  transition: top 0.5s, left 0.5s, bottom 0.5s, right 0.5s;
  z-index: 1;/*覆盖优先度 */
}
.about{
  position: relative;
  width: 100vw;
  left: 0%;
  z-index: 1;/*覆盖优先度 */
}
</style>